<template>
  <div class="internship-container">
    <el-card shadow="never" class="card-wrapper">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <el-input
          v-model="filter.id"
          placeholder="输入编号"
          style="width: 120px"
          class="filter-item"
          clearable
          @keyup.enter="handleSearch"
        />
        <el-input
          v-model="filter.name"
          placeholder="输入名称"
          style="width: 120px; margin-left: 10px"
          class="filter-item"
          clearable
          @keyup.enter="handleSearch"
        />
        <el-input
          v-model="filter.company"
          placeholder="输入单位名称"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
          clearable
          @keyup.enter="handleSearch"
        />
        <el-button 
          type="primary" 
          style="margin-left: 10px"
          @click="handleSearch"
        >
          <el-icon><Search /></el-icon> 搜索
        </el-button>
        <el-button 
          style="margin-left: 10px"
          @click="resetSearch"
        >
          <el-icon><Refresh /></el-icon> 重置
        </el-button>
      </div>

      <!-- 批量操作和分页信息 -->
      <div class="footer-section">
        <div class="batch-actions">
          <el-button 
            type="danger" 
            :disabled="selection.length === 0"
            @click="batchDelete"
          >
            <el-icon><Delete /></el-icon> 批量删除
          </el-button>
          <span class="selected-count" v-if="selection.length > 0">
            已选择 {{ selection.length }} 项
          </span>
        </div>
        <div class="pagination-info">
          第1 到 {{ filteredData.length }} 条，共 {{ filteredData.length }} 条记录。
        </div>
      </div>

      <!-- 数据表格 -->
      <div class="table-wrapper">
        <el-table
          :data="filteredData"
          fit
          header-row-class-name="table-header"
          stripe
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="id" label="编号" width="80" align="center"/>
          <el-table-column prop="name" label="名称" width="120"/>
          <el-table-column prop="requirement" label="申请要求" width="120" show-overflow-tooltip/>
          <el-table-column prop="start_time" label="开始时间" width="120" align="center"/>
          <el-table-column prop="end_time" label="结束时间" width="120" align="center"/>
          <el-table-column prop="submit_time" label="申请提交时间" width="130" align="center"/>
          <el-table-column prop="company" label="实习单位名称" width="150"/>
          <el-table-column prop="company_info" label="实习单位简介" width="150" show-overflow-tooltip/>
          <el-table-column label="操作" width="180" align="center" fixed="right">
            <template #default="scope">
              <el-button 
                type="primary" 
                size="small"
                @click="handleEdit(scope.row)"
              >
                <el-icon><Edit /></el-icon> 修改
              </el-button>
              <el-button 
                type="danger" 
                size="small"
                @click="handleDelete(scope.row)"
              >
                <el-icon><Delete /></el-icon> 删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog 
      v-model="editDialogVisible"
      :title="'编辑实习信息 - ' + form.name"
      width="50%"
      @closed="handleDialogClosed"
    >
      <el-form 
        :model="form" 
        :rules="rules" 
        ref="formRef" 
        label-width="120px"
      >
        <el-form-item label="编号" prop="id">
          <el-input v-model="form.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入实习名称"></el-input>
        </el-form-item>
        <el-form-item label="申请要求" prop="requirement">
          <el-input 
            v-model="form.requirement" 
            placeholder="请输入申请要求"
            type="textarea"
            :rows="2"
          ></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="start_time">
          <el-date-picker
            v-model="form.start_time"
            type="date"
            placeholder="选择开始时间"
            value-format="YYYY-MM-DD"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="end_time">
          <el-date-picker
            v-model="form.end_time"
            type="date"
            placeholder="选择结束时间"
            value-format="YYYY-MM-DD"
            style="width: 100%"
            :disabled-date="endDateOptions.disabledDate"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="申请提交时间" prop="submit_time">
          <el-date-picker
            v-model="form.submit_time"
            type="date"
            placeholder="选择提交时间"
            value-format="YYYY-MM-DD"
            style="width: 100%"
            :disabled-date="submitDateOptions.disabledDate"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="实习单位名称" prop="company">
          <el-input v-model="form.company" placeholder="请输入单位名称"></el-input>
        </el-form-item>
        <el-form-item label="单位简介" prop="company_info">
          <el-input
            type="textarea"
            :rows="3"
            v-model="form.company_info"
            placeholder="请输入单位简介"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Search,
  Refresh,
  Edit,
  Delete
} from '@element-plus/icons-vue'

// 数据状态
const filter = ref({
  id: '',
  name: '',
  company: ''
})

const tableData = ref([
  {
    id: 4,
    name: '生产实习',
    requirement: '无挂科',
    start_time: '2020-01-02',
    end_time: '2020-02-28',
    submit_time: '2020-01-01',
    company: '华为',
    company_info: '华为技术有限公司是一家生产销售通信设备的民营通信科技公司'
  },
  {
    id: 5,
    name: '软件开发实习',
    requirement: '计算机相关专业',
    start_time: '2020-03-01',
    end_time: '2020-06-30',
    submit_time: '2020-02-15',
    company: '阿里巴巴',
    company_info: '阿里巴巴集团控股有限公司是中国最大的电子商务公司之一'
  },
  {
    id: 6,
    name: '市场营销实习',
    requirement: '市场营销相关专业',
    start_time: '2020-04-01',
    end_time: '2020-07-31',
    submit_time: '2020-03-15',
    company: '腾讯',
    company_info: '腾讯是中国领先的互联网增值服务提供商'
  }
])

const selection = ref([])
const editDialogVisible = ref(false)
const formRef = ref(null)

const form = ref({
  id: '',
  name: '',
  requirement: '',
  start_time: '',
  end_time: '',
  submit_time: '',
  company: '',
  company_info: ''
})

// 表单验证规则
const rules = {
  name: [
    { required: true, message: '请输入实习名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在2到50个字符', trigger: 'blur' }
  ],
  requirement: [
    { required: true, message: '请输入申请要求', trigger: 'blur' }
  ],
  start_time: [
    { required: true, message: '请选择开始时间', trigger: 'change' }
  ],
  end_time: [
    { required: true, message: '请选择结束时间', trigger: 'change' }
  ],
  submit_time: [
    { required: true, message: '请选择提交时间', trigger: 'change' }
  ],
  company: [
    { required: true, message: '请输入单位名称', trigger: 'blur' }
  ]
}

// 日期选择器选项
const endDateOptions = {
  disabledDate: (time) => {
    if (form.value.start_time) {
      return time < new Date(form.value.start_time)
    }
    return false
  }
}

const submitDateOptions = {
  disabledDate: (time) => {
    if (form.value.start_time) {
      return time > new Date(form.value.start_time)
    }
    return false
  }
}

// 计算属性
const filteredData = computed(() => {
  return tableData.value.filter(item => {
    return (
      (filter.value.id === '' || item.id.toString().includes(filter.value.id)) &&
      (filter.value.name === '' || item.name.includes(filter.value.name)) &&
      (filter.value.company === '' || item.company.includes(filter.value.company))
    )
  })
})

// 方法
const handleSearch = () => {
  ElMessage.success('搜索完成')
}

const resetSearch = () => {
  filter.value = {
    id: '',
    name: '',
    company: ''
  }
  ElMessage.info('已重置搜索条件')
}

const handleSelectionChange = (val) => {
  selection.value = val
}

const handleEdit = (row) => {
  form.value = JSON.parse(JSON.stringify(row))
  editDialogVisible.value = true
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除这条实习信息吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = tableData.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      tableData.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

const batchDelete = () => {
  if (selection.value.length === 0) return
  
  ElMessageBox.confirm(`确定要删除选中的 ${selection.value.length} 条实习信息吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const ids = selection.value.map(item => item.id)
    tableData.value = tableData.value.filter(item => !ids.includes(item.id))
    selection.value = []
    ElMessage.success(`已删除 ${ids.length} 条记录`)
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

const handleDialogClosed = () => {
  formRef.value?.resetFields()
}

const submitForm = async () => {
  try {
    await formRef.value.validate()
    
    const index = tableData.value.findIndex(item => item.id === form.value.id)
    if (index !== -1) {
      tableData.value[index] = { ...form.value }
      ElMessage.success('修改成功')
      editDialogVisible.value = false
    }
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}
</script>

<style scoped>
.internship-container {
  padding: 20px;
}

.card-wrapper {
  border-radius: 8px;
}

.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.filter-item {
  margin-left: 10px;
}

.table-wrapper {
  margin-top: 20px;
}

.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
}

.footer-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 10px 0;
}

.batch-actions {
  display: flex;
  align-items: center;
}

.selected-count {
  margin-left: 15px;
  color: #606266;
  font-size: 14px;
}

.pagination-info {
  color: #909399;
  font-size: 13px;
}

.el-button [class*="el-icon-"] {
  margin-right: 5px;
}

.el-table {
  width: 100%;
}

.el-table--border {
  border-radius: 4px;
}

.el-table :deep(.el-table__cell) {
  padding: 12px 0;
}

.el-form-item {
  margin-bottom: 18px;
}

.el-date-editor, .el-input, .el-textarea {
  width: 100%;
}
</style>